<template>
  <movable-area style="width: 750rpx; height: 93vh" class="main" :style="{ '--cf': '#fff' }">
    <m-navbar title="出库单" background="#fff">
      <view slot="right" style="color: #248dfa" @click="handleViewHistory"> 历史出库单 </view>
    </m-navbar>
    <m-tabs
      @click="handleTabChange"
      sticky
      animated
      background="#fff"
      activeColor="#248DFA"
      v-model="current"
      style="margin-top: -5rpx"
    >
      <m-tabpane :title="item.name" v-for="(item, index) in tabs" :key="index" padding="0" background="transparent">
        <out-work-item-scroll
          :height="isH5 ? 'calc(100vh - 80px)' : 'calc(100vh - 123px)'"
          :api="listOutOrder"
          :modal="modal"
          :ref="'scroll' + index"
        />
      </m-tabpane>
    </m-tabs>

    <movable-view class="movable-item" direction="vertical" inertia x="486rpx" y="750rpx" @click="handleAddData">
      <m-icon name="mask-plus" size="56" color="#fff" margin-left="16rpx"></m-icon> <text>新建出库单</text>
    </movable-view>

    <m-modal />
  </movable-area>
</template>

<script>
import { router } from '@/router'
import { isH5 } from '@/utils/platform'
import { listOutOrder } from '@/api/modules/out-work'
import throttle from '@/utils/throttle'

export default {
  data() {
    return {
      tabs: [
        {
          name: '出库中心',
          value: [1, 4, 2, 3],
        },
        {
          name: '待审核',
          value: [0],
        },
        {
          name: '草稿箱',
          value: [5, 6],
        },
      ],
      modal: {
        strStatus: [1, 4, 2, 3].join(','),
      },
      isH5,
      listOutOrder,
      key: 0,
      current: 0,
    }
  },
  onShow() {
    this.refresh()
  },
  onLoad() {
    this.$store.commit('modal/setModalShow', false)
  },
  methods: {
    refresh() {
      const scroll = this.$refs['scroll' + this.current] || null
      scroll && scroll[0].downCallback()
    },
    handleTabChange(e) {
      this.modal.strStatus = this.tabs[e.paneKey].value.join(',')
      if ([1, 2].includes(+e.paneKey)) {
        this.$nextTick(() => {
          this.refresh()
        })
      }
    },
    handleAddData() {
      throttle(() => {
        router.push({
          name: 'addOutWork',
        })
      }, 1000)
    },
    handleViewHistory() {
      throttle(() => {
        router.push({
          name: 'OutWorkHistory',
        })
      }, 1000)
    },
  },
}
</script>

<style lang="scss" scoped>
.main {
  background: #eef3f9;
}
.movable-item {
  width: 268rpx;
  height: 88rpx;
  @include v-center;
  background: #11d3c8;
  box-shadow: 0px 0px 6px 0px rgba(93, 145, 142, 0.32);
  border-radius: 44px 0px 0px 44px;
  position: fixed;
  right: 0;
  top: 88rpx;
  z-index: 99999;
  font-size: 32rpx;
  text {
    padding-left: 8rpx;
    color: #fff;
  }
}
</style>
